<template>
  <div>
    <el-button size="small" class="mar-btm-10" @click="addCallback">新增关键词</el-button>
    <el-table :data="state.callbacks" :border="true" size="mini">
      <el-table-column prop="keyword" label="关键词" width="150px">
        <template slot-scope="scope">
          <el-input v-model="scope.row.keyword" :clearable="true" size="mini" placeholder="请输入关键词"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="action" label="触发动作">
        <template slot-scope="scope">
          <div></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="90px">
        <template slot-scope="scope">
          <el-button type="text" size="mini" class="font-color-success font-weight-bold"
                     @click="cloneCallback(scope.$index)">复制
          </el-button>
          <el-button type="text" size="mini" class="font-color-danger font-weight-bold mar-rgt-5"
                     @click="removeCallback(scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {dataBindType, dataTypeCfg} from '@/config/ide/common';
  import {deepCopy} from '@/utils';
  import {SpeechRecognition} from "@/modules/IDE/widget/custom/speechRecognition";

  export default {
    name: 'SpeechRecognitionSpec',
    props: {
      widget: {
        type: SpeechRecognition,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        dataTypeCfg: dataTypeCfg,
      };
    },
    computed: {
      state() {
        return this.widget.getCurrentState();
      }
    },
    methods: {
      addCallback() {
        this.state.callbacks.push({keyword: '', action: {key: '', type: dataBindType.event}});
      },
      cloneCallback(idx) {
        const callback = this.state.callbacks[idx];
        if (!callback) return;
        this.state.callbacks.splice(idx, 0, deepCopy(callback));
      },
      removeCallback(idx) {
        this.state.callbacks.splice(idx, 1);
      }
    },
  };
</script>

<style scoped>
</style>
